import React from 'react';
import Descriptions from '../Descriptions';

type TraceabilityQueryData = {
  id: number;
  name: string;
  material: {
    supplierName: string;
    principal: string;
    place: string;
    quantity: string;
    price: string;
    date: string;
  };
  materialWareHouse: {
    principal: string;
    warehouse: string;
    weight: string;
    quality: string;
    date: string;
  };
  cleanCutting: {
    principal: string;
    place: string;
    weight: string;
    quality: string;
    date: string;
  };
  boilingCooling: {
    principal: string;
    place: string;
    weight: string;
    quality: string;
    date: string;
  };
  qualityTest: {
    batch: string;
    principal: string;
    place: string;
    quantity: string;
    date: string;
    reason: string;
  };
};

interface ExhibitionAreaProps {
  showInfoKey: string;
  data: Array<TraceabilityQueryData>;
}

const ExhibitionArea: React.FC<ExhibitionAreaProps> = ({
  showInfoKey,
  data,
}) => {
  let content = null;

  switch (showInfoKey) {
    case 'material':
      content = data.map((item, index) => (
        <div key={index}>
          <Descriptions
            title=""
            info={[
              {
                label: '供应商名称',
                children: item.material.supplierName,
              },
              {
                label: '负责人',
                children: item.material.principal,
              },
              {
                label: '地点',
                children: item.material.place,
              },
              {
                label: '数量',
                children: item.material.quantity,
              },
              {
                label: '价格',
                span: { xl: 2, xxl: 2 },
                children: item.material.price,
              },
              {
                label: '日期',
                span: { xl: 2, xxl: 2 },
                children: item.material.date,
              },
            ]}
          />
        </div>
      ));
      break;
    case 'materialWareHouse':
      content = data.map((item, index) => (
        <div key={index}>
          <Descriptions
            title=""
            info={[
              {
                label: '负责人',
                children: item.materialWareHouse.principal,
              },
              {
                label: '仓库',
                children: item.materialWareHouse.warehouse,
              },
              {
                label: '重量',
                children: item.materialWareHouse.weight,
              },
              {
                label: '质量',
                span: { xl: 2, xxl: 2 },
                children: item.materialWareHouse.quality,
              },
              {
                label: '日期',
                span: { xl: 2, xxl: 2 },
                children: item.materialWareHouse.date,
              },
            ]}
          />
        </div>
      ));
      break;
    case 'cleanCutting':
    case 'boilingCooling':
      content = data.map((item, index) => (
        <div key={index}>
          <Descriptions
            title="清洗切割"
            info={[
              {
                label: '负责人',
                children: item.cleanCutting.principal,
              },
              {
                label: '地点',
                children: item.cleanCutting.place,
              },
              {
                label: '重量',
                children: item.cleanCutting.weight,
              },
              {
                label: '质量',
                children: item.cleanCutting.quality,
              },
              {
                label: '日期',
                span: { xl: 2, xxl: 2 },
                children: item.cleanCutting.date,
              },
            ]}
          />
          <Descriptions
            title="烫煮冷却"
            info={[
              {
                label: '负责人',
                children: item.boilingCooling.principal,
              },
              {
                label: '地点',
                children: item.boilingCooling.place,
              },
              {
                label: '重量',
                children: item.boilingCooling.weight,
              },
              {
                label: '质量',
                children: item.boilingCooling.quality,
              },
              {
                label: '日期',
                span: { xl: 2, xxl: 2 },
                children: item.boilingCooling.date,
              },
            ]}
          />
        </div>
      ));
      break;
    case 'qualityTest':
      content = data.map((item, index) => (
        <div key={index}>
          <Descriptions
            title=""
            info={[
              {
                label: '批次',
                children: item.qualityTest.batch,
              },
              {
                label: '负责人',
                children: item.qualityTest.principal,
              },
              {
                label: '地点',
                children: item.qualityTest.place,
              },
              {
                label: '数量',
                children: item.qualityTest.quantity,
              },
              {
                label: '日期',
                span: { xl: 2 },
                children: item.qualityTest.date,
              },
              {
                label: '原因',
                span: { xl: 2, xxl: 2 },
                children: item.qualityTest.reason,
              },
            ]}
          />
        </div>
      ));
      break;
    default:
      content = <div>No content available</div>;
      break;
  }

  return <div>{content}</div>;
};

export default ExhibitionArea;
